<template>
  <div class="order-detail-page">
    <div class="out-box" style="margin: 20px 30px">
      <el-collapse v-model="collapseItems">
        <el-collapse-item name="0">
          <template slot="title">
            <i class="header-icon el-icon-tickets"></i>
            <div class="collapse-title">基本信息</div>
          </template>
          <el-table :data="[refundInfo]" border style="width: 100%">
            <el-table-column
              prop="refundTradeNo"
              label="退款单号"
            ></el-table-column>
            <el-table-column prop="status" label="退款状态" width="130">
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.order_refund_status"
                  :value="scope.row.status"
                />
              </template>
            </el-table-column>

            <el-table-column
              prop="refundAmount"
              label="退款金额"
            ></el-table-column>
            <el-table-column
              prop="refundReason"
              label="退款原因"
            ></el-table-column>
            <el-table-column
              prop="refuseRefundReason"
              label="拒绝退款原因"
            ></el-table-column>
            <el-table-column
              prop="createDate"
              label="申请时间"
            ></el-table-column>
             <el-table-column
              prop="refundSource"
              label="退款申请来源"
            ></el-table-column>
          </el-table>
        </el-collapse-item>

        <el-collapse-item name="1">
          <template slot="title">
            <i class="header-icon el-icon-tickets"></i>
            <div class="collapse-title">订单信息</div>
          </template>
          <el-table :data="[orderInfoVo]" border style="width: 100%">
            <el-table-column prop="orderNo" label="订单号"></el-table-column>
            <el-table-column label="订单来源" width="130">
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.order_source"
                  :value="scope.row.orderSource"
                />
              </template>
            </el-table-column>
            <el-table-column prop="status" label="订单状态" width="130">
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.order_status"
                  :value="scope.row.status"
                />
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="订单备注"></el-table-column>
            <el-table-column
              prop="createDate"
              label="创建时间"
            ></el-table-column>

            <el-table-column prop="isMakrout" label="开票状态" width="130">
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.order_is_makeout"
                  :value="scope.row.isMakrout"
                />
              </template>
            </el-table-column>
            <el-table-column prop="activeStatus" label="激活状态" width="130" v-if="orderInfoVo.memberType && orderInfoVo.memberType=='0'">
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.order_active_status"
                  :value="scope.row.activeStatus"
                />
              </template>
            </el-table-column>
            <el-table-column prop="activeStatus" label="激活状态" width="130" v-else>
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.order_recharge_status"
                  :value="scope.row.activeStatus"
                />
              </template>
            </el-table-column>

            <!--<el-table-column prop="activeStatus" label="激活状态" width="130">-->
              <!--<template slot-scope="scope">-->
                <!--<dict-tag-->
                  <!--:options="dict.type.order_active_status"-->
                  <!--:value="scope.row.activeStatus"-->
                <!--/>-->
              <!--</template>-->
            <!--</el-table-column>-->
          </el-table>
        </el-collapse-item>

        <el-collapse-item name="2">
          <template slot="title">
            <i class="header-icon el-icon-goods"></i>
            <div class="collapse-title">商品信息</div>
          </template>
          <el-table
            :data="orderInfoVo.items"
            border
            style="width: 100%"
            :default-expand-all="true"
          >
            <el-table-column type="expand">
              <template slot-scope="props">
                <div style="margin-left: 50px">
                  <div class="title" style="display: flex">
                    <i class="header-icon el-icon-goods"></i>
                    <div class="collapse-title">软件信息</div>
                  </div>
                  <el-table :data="props.row.services" border style="width: 100%">
                    <template>
                      <el-table-column
                        prop="serviceName"
                        label="服务名称"
                      ></el-table-column>
                      <el-table-column
                        prop="modelName"
                        label="车型名称"
                      ></el-table-column>
                      <el-table-column
                        prop="serviceCode"
                        label="服务代码"
                      ></el-table-column>
                      <el-table-column
                        prop="description"
                        label="服务说明"
                      ></el-table-column>
                      <el-table-column prop="activeStatus" label="激活状态" v-if="refundInfo.orderInfoVo.memberType && refundInfo.orderInfoVo.memberType=='0'">
                        <template slot-scope="scope">
                          <dict-tag
                            :options="dict.type.order_active_status"
                            :value="scope.row.activeStatus"
                          />
                        </template>
                      </el-table-column>
                      <el-table-column prop="activeStatus" label="激活状态" v-else>
                        <template slot-scope="scope">
                          <dict-tag
                            :options="dict.type.order_recharge_status"
                            :value="scope.row.activeStatus"
                          />
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="createDate"
                        label="激活时间"
                      ></el-table-column>
                    </template>
                  </el-table>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="spuId" label="商品id"></el-table-column>
            <el-table-column prop="picUrl" label="商品图片" width="110">
              <template slot-scope="scope">
                <img
                  class="imgClass"
                  :src="scope.row.picUrl"
                  width="88"
                  height="88"
                />
              </template>
            </el-table-column>
            <el-table-column prop="spuName" label="商品名称"></el-table-column>
            <el-table-column prop="salesPrice" label="价格"></el-table-column>
            <el-table-column prop="skuId" label="skuID"></el-table-column>
            <el-table-column prop="specName" label="规格名"></el-table-column>
            <el-table-column prop="specInfo" label="规格值"></el-table-column>
            <el-table-column prop="quantity" label="购买数量"></el-table-column>
            <el-table-column label="商品快照" width="150">
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  size="mini"
                  @click="handleGoodSnapshot(scope.row)"
                  >查看商品快照</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-collapse-item>

        <el-collapse-item name="3">
          <template slot="title">
            <i class="header-icon el-icon-user"></i>
            <div class="collapse-title">用户信息</div>
          </template>
          <el-table :data="[orderInfoVo]" border style="width: 100%">
            <el-table-column prop="userId" label="用户id"></el-table-column>
            <el-table-column prop="userName" label="用户昵称"></el-table-column>
            <el-table-column
              prop="modelName"
              label="车型名称"
            ></el-table-column>
            <el-table-column prop="vin" label="车架号"></el-table-column>
          </el-table>
        </el-collapse-item>
        <el-collapse-item name="4">
          <template slot="title">
            <i class="header-icon el-icon-bank-card"></i>
            <div class="collapse-title">支付信息</div>
          </template>
          <el-table :data="[orderInfoVo]" border style="width: 100%">
            <el-table-column prop="paymentType" label="支付方式">
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.order_payment_type"
                  :value="scope.row.paymentType"
                />
              </template>
            </el-table-column>
            <el-table-column prop="isPay" label="支付状态">
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.order_is_pay"
                  :value="scope.row.isPay"
                />
              </template>
            </el-table-column>
            <el-table-column
              prop="paymentPrice"
              label="订单金额"
            ></el-table-column>

            <el-table-column
              prop="paymentTime"
              label="支付时间"
            ></el-table-column>
          </el-table>
        </el-collapse-item>
        <el-collapse-item name="5">
          <template slot="title">
            <i class="header-icon el-icon-receiving"></i>
            <div class="collapse-title">操作记录</div>
          </template>
          <el-table :data="orderInfoVo.logs" border style="width: 100%">
            <el-table-column prop="operateRole" label="操作角色">
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.order_operate_role"
                  :value="scope.row.operateRole"
                />
              </template>
            </el-table-column>
            <el-table-column prop="createBy" label="操作人员"></el-table-column>
            <el-table-column
              prop="createDesc"
              label="操作事项"
            ></el-table-column>
            <el-table-column prop="createDesc" label="备注"></el-table-column>
            <el-table-column
              prop="createDate"
              label="操作时间"
            ></el-table-column>
          </el-table>
        </el-collapse-item>
      </el-collapse>
    </div>

    <goods-snapshot
      :visible.sync="showGoodsSnapshot"
      :goodsData="goodsSnapshotData"
    ></goods-snapshot>
  </div>
</template>
<script>
import GoodsSnapshot from "@/components/GoodsSnapshot";
import { getRefund } from "@/api/shop/refund";

export default {
  name: "order-detail-page",
  dicts: [
    "order_is_makeout",
    "order_is_pay",
    "order_status",
    "order_active_status",
    "order_recharge_status",
    "app_name_type",
    "order_payment_type",
    "order_source",
    "order_operate_role",
    "order_refund_status"
  ],
  components: {
    GoodsSnapshot,
  },
  props: {},
  computed: {},
  watch: {},
  data() {
    return {
      refundInfo: {},
      orderInfoVo: {},
      collapseItems: ["0", "1", "2", "3", "4", "5", "6"], // 默认展开的项
      showGoodsSnapshot: false,
      goodsSnapshotData: {},
      seriesList:[] //存放服务信息
    };
  },
  created() {
    let id = this.$route.query.id;
    if (!id) {
      this.$message.error("缺少订单id");
      return;
    }

    console.log("this.dict: ", this.dict);

    this.getData(id);
  },
  mounted() {},
  methods: {
    getData(id) {
      getRefund(id).then((res) => {
        // console.log("res: ", res);
        this.initSeriesList(res.data.orderInfoVo.items);
        this.refundInfo = res.data;
        this.orderInfoVo = res.data.orderInfoVo;
      });
    },
    /**
     * 查看商品快照
     */
    handleGoodSnapshot(row) {
      this.showGoodsSnapshot = true;
      // 当前查看的商品快照
      this.goodsSnapshotData = row.orderGoods;
    },
    initSeriesList(data){
      this.seriesList = [];
      data.forEach((spuItem)=>{
        spuItem.services.forEach((serviceItem)=>{
          if(!serviceItem['activeStatus']){
            serviceItem['activeStatus'] = '0'
          }
          this.seriesList.push(serviceItem);
        })
      })
    }
  },
};
</script>
<style lang="scss" scoped>
.order-detail-page {
  .header-icon {
    margin-right: 5px;
    font-size: 18px;
    font-weight: 700;
  }
  .collapse-title {
    font-size: 16px;
  }
}
</style>
